<script setup lang="ts">
import { ListTable, VTable } from '@visactor/vue-vtable'
import { downloadExcel, exportVTableToExcel } from '@visactor/vtable-export'
import { useDictLabel } from '@/hooks'
import { computeRate, formatRate } from '@/utils/common'

defineProps({
  records: Array<any>,
})

const listTableRef = ref<InstanceType<typeof ListTable>>()
const options = {
  title: {
    text: '三率数据统计表-班级维度',
    align: 'center',
    padding: [0, 0, 20, 0],
  },
  emptyTip: {
    text: '选择查询条件后点击搜索',
  },
  widthMode: 'autoWidth',
  heightMode: 'standard',
  autoFillWidth: true,
  // autoFillHeight: true,
  theme: VTable.themes.BRIGHT,
  frozenRowCount: 1,
  frozenColCount: 3,
  hover: {
    highlightMode: 'row',
  },
  tooltip: {
    renderMode: 'html',
    isShowOverflowTextTooltip: true,
  },
  keyboardOptions: {
    copySelected: true,
  },
  sortState: {
    field: 'renewalRate',
    order: 'desc',
  },
  columns: [
    {
      field: '',
      title: '序号',
      width: 66,
      fieldFormat: (data, col, row, table) => row,
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.NONE,
        formatFun: () => '汇总',
      },
    },
    {
      field: 'className',
      title: '班级',
      width: '300',
      tooltip: true,
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.COUNT,
        formatFun: value => `共计${value}个班级`,
      },
    },
    {
      field: 'leadTeacherName',
      title: '主讲老师',
      width: 'auto',
    },
    {
      field: 'grade',
      title: '年级',
      width: 'auto',
      fieldFormat: value => useDictLabel('Grade', value.grade),
    },
    {
      field: 'plannedStudentCount',
      title: '班级限额',
      sort: true,
      width: 'auto',
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.SUM,
      },
    },
    {
      field: 'passedStudentCount',
      title: '在读人数',
      sort: true,
      width: 'auto',
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.SUM,
      },
    },
    {
      field: 'cancelStudentCount',
      title: '退费人数',
      sort: true,
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.SUM,
      },
    },
    {
      field: 'renewalStudentCount',
      title: '续报人数',
      sort: true,
      width: 'auto',
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.SUM,
      },
    },
    {
      field: 'retainedStudentCount',
      title: '留存人数',
      sort: true,
      width: 'auto',
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.SUM,
      },
    },
    {
      field: 'fullRate',
      title: '满班率',
      sort: true,
      width: 'auto',
      fieldFormat: record => formatRate(record.fullRate),
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.CUSTOM,
        aggregationFun: (values, records) => {
          const passedStudentCount = records.reduce((sum, item) => sum + item.passedStudentCount, 0)
          const plannedStudentCount = records.reduce((sum, item) => sum + item.plannedStudentCount, 0)
          const totalRate = computeRate(passedStudentCount, plannedStudentCount)
          return formatRate(totalRate)
        },
      },
    },
    {
      field: 'renewalRate',
      title: '续报率',
      sort: true,
      width: 'auto',
      fieldFormat: record => formatRate(record.renewalRate),
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.CUSTOM,
        aggregationFun: (values, records) => {
          const renewalStudentCount = records.reduce((sum, item) => sum + item.renewalStudentCount, 0)
          const passedStudentCount = records.reduce((sum, item) => sum + item.passedStudentCount, 0)
          const totalRate = computeRate(renewalStudentCount, passedStudentCount)
          return formatRate(totalRate)
        },
      },
    },
    {
      field: 'cancelRate',
      title: '退费率',
      sort: true,
      width: 'auto',
      fieldFormat: record => formatRate(record.cancelRate),
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.CUSTOM,
        aggregationFun: (values, records) => {
          const cancelStudentCount = records.reduce((sum, item) => sum + item.cancelStudentCount, 0)
          const passedStudentCount = records.reduce((sum, item) => sum + item.passedStudentCount, 0)
          const totalRate = computeRate(cancelStudentCount, cancelStudentCount + passedStudentCount)
          return formatRate(totalRate)
        },
      },
    },
    {
      field: 'retainedRate',
      title: '留存率',
      sort: true,
      width: 'auto',
      fieldFormat: record => formatRate(record.retainedRate),
      aggregation: {
        aggregationType: VTable.TYPES.AggregationType.CUSTOM,
        aggregationFun: (values, records) => {
          const cancelStudentCount = records.reduce((sum, item) => sum + item.cancelStudentCount, 0)
          const passedStudentCount = records.reduce((sum, item) => sum + item.passedStudentCount, 0)
          const retainedStudentCount = records.reduce((sum, item) => sum + item.retainedStudentCount, 0)
          const totalRate = computeRate(retainedStudentCount, cancelStudentCount + passedStudentCount)
          return formatRate(totalRate)
        },
      },
    },
  ],
}

const onExport = async () => {
  const excelOption = {
  }
  downloadExcel(await exportVTableToExcel(listTableRef.value.vTableInstance, excelOption), '三率数据统计表-班级维度')
}

defineExpose({ onExport })
</script>

<template>
  <ListTable ref="listTableRef" :options="options" :records="records" />
</template>

<style scoped>

</style>
